<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BlockPy Example</title>

    <!-- D3 -->
    <script src="../libs/d3/d3.min.js"></script>

    <!-- FontAwesome 5 -->
    <link rel="stylesheet" href="../libs/fontawesome/all.min.css">

    <!-- JQuery -->
    <script src="../libs/jquery/jquery-3.4.1.min.js"></script>

    <!-- JQuery UI -->
    <script src="../libs/jquery/jquery-ui.min.js"></script>

    <!-- JQuery Multi-select -->
    <link rel="stylesheet" href="../libs/jquery/multi-select.css">
    <script src="../libs/jquery/jquery.multi-select.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="../libs/bootstrap/bootstrap.min.css">
    <script src="../libs/bootstrap/popper.min.js"></script>
    <script src="../libs/bootstrap/bootstrap.min.js"></script>

    <!-- Knockout -->
    <script src="../libs/knockout/knockout-3.5.0.js"></script>

    <!-- HighlightJS -->
    <link rel="stylesheet" href="../libs/highlight/default.min.css">
    <script src="../libs/highlight/highlight.min.js"></script>

    <!-- EasyMD -->
    <link rel="stylesheet" href="../libs/easymde/easymde.css">
    <script src="../libs/easymde/easymde.min.js"></script>

    <!-- Code Mirror -->
    <link rel="stylesheet" href="../libs/codemirror/codemirror.css">
    <link rel="stylesheet" href="../libs/codemirror/fullscreen.css">
    <script src="../libs/codemirror/codemirror.js"></script>
    <script src="../libs/codemirror/diff.js"></script>
    <script src="../libs/codemirror/django.js"></script>
    <script src="../libs/codemirror/fullscreen.js"></script>
    <script src="../libs/codemirror/markdown.js"></script>
    <script src="../libs/codemirror/python.js"></script>
    <script src="../libs/codemirror/shell.js"></script>
    <script src="../libs/codemirror/yaml-frontmatter.js"></script>

    <!-- Blockly -->
    <script src="../../blockly/blockly_compressed.js" type="text/javascript"></script>
    <script src="../../blockly/blocks_compressed.js" type="text/javascript"></script>
    <script src="../../blockly/msg/js/en.js" type="text/javascript"></script>
    <script src="../../blockly/python_compressed.js" type="text/javascript"></script>

    <!-- Skulpt -->
    <script src="../../skulpt/dist/skulpt.js" type="text/javascript"></script>
    <script src="../../skulpt/dist/skulpt-stdlib.js" type="text/javascript"></script>

    <!-- Pedal -->
    <script src="../../../pedal-edu/pedal/dist-js/skulpt-pedal.js" type="text/javascript"></script>
    <script src="../../../pedal-edu/curriculum-ctvt/dist-js/skulpt-curriculum-ctvt.js" type="text/javascript"></script>
    <script src="../../../pedal-edu/curriculum-sneks/dist-js/skulpt-curriculum-sneks.js" type="text/javascript"></script>

    <!-- BlockMirror -->
    <link rel="stylesheet" href="../../BlockMirror/dist/block_mirror.css">
    <script src="../../BlockMirror/dist/block_mirror.js" type="text/javascript"></script>

    <!-- BlockPy -->
    <link rel="stylesheet" href="../dist/blockpy.css">
    <script src="../dist/blockpy.js"></script>

</head>
<body>

<div style="width:900px;  margin:0 auto;">

<div id="main-editor"></div>

    <!-- Debugging code
import turtle
turtle.bgpic("https://i.imgur.com/A8eQsll.jpg")
turtle.forward(50)
turtle.right(90)
turtle.forward(100)
turtle.circle(10)

# Image manipulation
from PIL import Image

i = Image()
i.open("http://placecorgi.com/260/180")
i.show()
-->

<script>
    let LOCAL_FILES = {
        LOCAL_ON_RUN_CODE: "",
        LOCAL_ON_EVAL_CODE: "",
        LOCAL_ANSWER_CODE: ""
    }
    try {
        if (localStorage) {
            for (let key in LOCAL_FILES) {
                let LOCAL = localStorage.getItem(key);
                if (LOCAL) {
                    LOCAL_FILES[key] = LOCAL;
                }
            }
        }
    } catch (e) {
        console.error(e);
    }

    $(document).ready(function() {
        editor = new blockpy.BlockPy({
            'attachment.point': '#main-editor',
            "urls": {
                "importDatasets": "https://corgis-edu.github.io/corgis/datasets/"
            },
            "display.instructor": true,
            //"assignment.on_eval": "console_log(ABC)",
            "assignment.on_run": LOCAL_FILES.LOCAL_ON_RUN_CODE,
            //"assignment.on_eval": LOCAL_FILES.LOCAL_ON_EVAL_CODE,
            "submission.code": LOCAL_FILES.LOCAL_ANSWER_CODE
        });
/*
from image import Image
dog = Image("http://localhost:8000/images/swimming.gif")
dog.flip().show()
 */
        blockmirror = editor.components.editors.registered_[1].bm;

        updateClient();
    });

    function saveNewClient() {
        LOCAL_FILES.LOCAL_ANSWER_CODE = editor.model.submission.code();
        LOCAL_FILES.LOCAL_ON_RUN_CODE = editor.model.assignment.onRun();
        LOCAL_FILES.LOCAL_ON_EVAL_CODE = editor.model.assignment.onEval();
        localStorage.setItem("LOCAL_ANSWER_CODE", LOCAL_FILES.LOCAL_ANSWER_CODE);
        localStorage.setItem("LOCAL_ON_RUN_CODE", LOCAL_FILES.LOCAL_ON_RUN_CODE);
        localStorage.setItem("LOCAL_ON_EVAL_CODE", LOCAL_FILES.LOCAL_ON_EVAL_CODE);
        updateClient();
    }

    function updateClient() {
        $("#old-answer-code").text(LOCAL_FILES.LOCAL_ANSWER_CODE);
        $("#old-on-run-code").text(LOCAL_FILES.LOCAL_ON_RUN_CODE);
        $("#old-on-eval-code").text(LOCAL_FILES.LOCAL_ON_EVAL_CODE);
    }

    function deleteOldClient() {
        localStorage.removeItem("LOCAL_ANSWER_CODE");
        localStorage.removeItem("LOCAL_ON_RUN_CODE");
        localStorage.removeItem("LOCAL_ON_EVAL_CODE");
        LOCAL_FILES.LOCAL_ANSWER_CODE = "";
        LOCAL_FILES.LOCAL_ON_RUN_CODE = "";
        LOCAL_FILES.LOCAL_ON_EVAL_CODE = "";
        updateClient();
    }
</script>

    <button onclick="deleteOldClient()">Reset old client</button>
    <button onclick="saveNewClient()">Save code now</button>
    <table>
        <tr>
            <td><pre id="old-answer-code"></pre></td>
            <td><pre id="old-on-run-code"></pre></td>
            <td><pre id="old-on-eval-code"></pre></td>
        </tr>
    </table>


</div>

</body>
</html>